<script setup>
import {
  UserFilled,
  User,
  EditPen,
  Stamp,
  Goods
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
import { useRouter} from "vue-router";
const router = useRouter()

const back=()=>{
router.push('/login')
}
</script>

<template>
  <el-container class="layout-container">
    <!-- 左侧菜单 -->
    <el-aside width="200px">
      <div class="el-aside__logo">
        <img src="../components/logo.jpg" alt="" style="width: 50%;margin:20px 50px">
      </div>
      <el-menu  active-text-color="black" background-color="#D9E3EF"  text-color="black"
               router class="custom-menu" >
        <el-menu-item index="/customer">
          <el-icon><Stamp /></el-icon>
          <span>客户列表</span>
        </el-menu-item>
        <el-menu-item index="/product">
          <el-icon><Goods /></el-icon>
          <span>商品列表</span>
        </el-menu-item>
        <el-menu-item index="/supplier">
          <el-icon><Stamp /></el-icon>
          <span>供应商列表</span>
        </el-menu-item>
        <el-sub-menu index="2" >
          <template #title>
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>进货事务</span>
          </template>
          <el-menu-item index="/purchase/purchase">
            <el-icon>
              <User />
            </el-icon>
            <span>进货列表</span>
          </el-menu-item>
          <el-menu-item index="/purchase/rePurchase">
            <el-icon>
              <EditPen />
            </el-icon>
            <span>退货列表</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>销售事务</span>
          </template>
          <el-menu-item index="/sale/sale">
            <el-icon>
              <User />
            </el-icon>
            <span>销售列表</span>
          </el-menu-item>
          <el-menu-item index="/sale/reSale">
            <el-icon>
              <EditPen />
            </el-icon>
            <span>退回销售列表</span>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/service">
          <el-icon><Stamp /></el-icon>
          <span>服务中心</span>
        </el-menu-item>
        <el-sub-menu index="4">
          <template #title>
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>管理员中心</span>
          </template>
          <el-menu-item index="/manger/mangerInfo">
            <el-icon>
              <User />
            </el-icon>
            <span>基本资料</span>
          </el-menu-item>
          <el-menu-item index="/manger/reSetPwd">
            <el-icon>
              <EditPen />
            </el-icon>
            <span>重置密码</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <!-- 右侧主区域 -->
    <el-container>
      <!-- 头部区域 -->
      <el-header>
       <div class="el-left">电商平台系统</div>
        <div class="header-action">
          <button id="logoutButton" @click="back">退出登录</button>
        </div>
      </el-header>
      <!-- 中间区域 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;
  .custom-menu .el-menu-item.is-active {
    font-weight: bold; /* 字体加粗 */
  }
  .el-aside {
    background-color: #D9E3EF;

    &__logo {
      height: 120px;
      //background: url('@/assets/logo.png') no-repeat center / 120px auto;
    }

    .el-menu {
      margin-top: 12px;
      border-right: none;
    }
  }

  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-left{
      margin-top: 1px;
      font-size: 25px;
      font-weight: bolder;
    }
    .header-action button {
      margin-top: 1px;
      background-color: #f0f0f0;
      border: none;
      border-radius: 25px;
      color: #333;
      padding: 10px 20px;
      cursor: pointer;
      outline: none;
      transition: background-color 0.3s, font-weight 0.3s;
    }


    .header-action button:hover {
      background-color: #e0e0e0;
      font-weight: bold;
    }

    #logoutButton {
      background-color: #d9534f;
      color: white;
    }

    #logoutButton:hover {
      background-color: #c9302c;
      font-weight: bold;
    }

    .el-dropdown__box {
      display: flex;
      align-items: center;

      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }

  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}
</style>
